<template>
  <div class="masthead" :style="`background:${bkcolor}`">
    <img class="ppl-banner" :src="`/${img}.png`" alt="Banner Image">
    <svg class="bk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367.57 190.59" preserveAspectRato="none" role="presentation">
      <path d="M1-5.7c26.29,0,52.59.07,78.88,0a13.65,13.65,0,0,1,8,2.25,85.25,85.25,0,0,1,19.56,17.1c9.32,11.46,6.88,35.64-9.63,43.28-13.87,6.43-28.32,9.78-43.33,11.41C36.52,70.29,18.7,69.25,1,66.53Z" transform="translate(-0.95 5.75)" style="fill: #fe3a25"/>
      <path d="M1368.52,80.78c-5.4-1.17-11-1-16.31-2.88s-6.07-3.28-4.68-8.82.34-7.87-5.16-9.87c-5.33-1.94-10.86-3.37-16.18-5.35-10.6-3.93-19-10.53-24.43-20.67-1.2-2.25-2.6-4.55-2.19-7.14.7-4.39-1.64-6.79-5-8.8-8.53-5.16-17.66-9.17-26.49-13.76-4.75-2.47-9.62-4.75-13.94-8.13,1.08-1.48,2.43-.78,3.53-.78,25.81,0,51.62,0,77.43-.1,3,0,4.94.61,6.51,3.36a28.59,28.59,0,0,0,13.63,12.05c4.46,2,8.83,4.17,13.24,6.27Z" transform="translate(-0.95 5.75)" style="fill: #fe3a25"/>
      <path d="M1246.48,127.21c4.46,3.79,8.85,7.68,13.41,11.34,5.62,4.53,11.83,5.91,18.58,2.58s12.78-1.78,18.46,2.79a88.76,88.76,0,0,1,19.86,22.17,29.91,29.91,0,0,1,3.68,8.19c1.58,5.92-.81,9.53-6.92,10.36-4.15.55-8.24-.15-12.25-1a88.26,88.26,0,0,0-33.5-.66c-14.87,2.68-28.51-.7-41.84-6.94-22.58-10.59-42.23-25.43-60.85-41.76C1143.63,115.46,1123.77,95.09,1108,71c-5.83-8.9-10.86-18.21-12.76-28.87a23.44,23.44,0,0,1,.22-10.34c3.15-11.87,12.11-16.31,23.25-11.25a60,60,0,0,1,20.71,15.64c11.66,13.57,26,24,39.62,35.32,4.86,4,9.85,7.94,14.78,11.91-4.63,2.68-8.39,5.94-9.77,11.53-5.1,20.5,11.63,42.56,32.77,43.12C1228.21,138.4,1237.65,133.68,1246.48,127.21Z" transform="translate(-0.95 5.75)" style="fill: #758ee2"/>
      <path d="M1060-5.65c28.66,0,56,0,83.38,0a3.46,3.46,0,0,1,3.52,2.47c5.25,11.77,14.4,19.2,26,24.43a120.59,120.59,0,0,1,29.81,19.24c11.73,10.27,18.86,22.91,19.29,38.75.15,5.53,3.51,8.22,7.76,10.32,8.66,4.27,14.35,11.26,18.39,19.76a29.06,29.06,0,0,1,2.26,6.72c1.22,6.35-1.89,10.12-8.35,10.34a36.73,36.73,0,0,1-13-2.4c-23.47-8-43.56-21-59.29-40.26-9.44-11.53-20.14-20.56-34.83-25a43,43,0,0,1-27.18-22.93c-1.47-3-2.7-6-2-9.54s-1.62-5.25-4-6.93c-8.27-5.88-17.35-10.4-26.16-15.38C1070.65,1.15,1065.45-1.19,1060-5.65Z" transform="translate(-0.95 5.75)" style="fill: #53be32"/>
      <path d="M261.84,174.13c-13.37-5.54-29.23-1.89-45-1.77-8.29.07-15.39-3.84-21.47-9a359.35,359.35,0,0,1-65-72,30.88,30.88,0,0,1-4.18-8.48c-1.34-4.51.44-6.5,5-5.21a37.81,37.81,0,0,1,15,7.73c15.51,13.52,31.19,26.85,48.54,38,2.25,1.45,4.64,2.72,7,4,3.62,1.91,6.86,2,10.47-.76,5.37-4.14,11.56-3.71,17.62-1.35,7.2,2.8,13.12,7.56,18.73,12.73,6.88,6.35,13.28,13.14,18.28,21.12a35.38,35.38,0,0,1,3.18,6.33C272.33,171.44,270.27,174.3,261.84,174.13Z" transform="translate(-0.95 5.75)" style="fill: #fe3a25"/>
      <path d="M748.31,123.68c14.77.31,27.3,2.41,39.17,7.74a45.65,45.65,0,0,1,11.27,6.91c8.94,7.68,9.74,17.32,1.91,26.14-7.33,8.24-17,12.47-27.5,14.81-15.19,3.4-29.28.91-41.35-9.41-8-6.81-12.22-15.59-12.09-26.22.1-8.51,3.88-13.93,11.82-17.05a31.45,31.45,0,0,1,5.9-1.75C741.63,124.09,745.87,123.49,748.31,123.68Z" transform="translate(-0.95 5.75)" style="fill: #fe3a25"/>
      <path d="M423,26.26c-2.71-3.56-6.63-5.17-10.64-6.65-9.88-3.65-19.22-8.08-24.78-17.76-1.33-2.31-2.82-4.58-2.75-7.42l58.89-.13a6.07,6.07,0,0,1,3.61.88c13.46,9,24.61,19.63,25.22,37.29.16,4.67,2.39,7.51,6.43,9.6,7.75,4,12.28,10.82,14.71,19,1.82,6.11-1.1,9.53-7.48,9.23-4-.18-7.74-1.53-11.42-3a100.94,100.94,0,0,1-43.05-31.72C429.11,32.25,426.45,28.89,423,26.26Z" transform="translate(-0.95 5.75)" style="fill: #6fb859"/>
      <path d="M575.82,38.08A39.5,39.5,0,0,1,595,42.69c18.58,9.78,33.85,23.2,44.54,41.48a38.31,38.31,0,0,1,4.31,10.49c1.5,6.29-.31,8.07-6.47,6.39-5.7-1.56-10.88-4.32-16-7.21a313.2,313.2,0,0,1-43.66-30.19c-4.54-3.71-8.8-7.77-11.91-12.82-4.52-7.34-2-12.08,6.65-12.74C573.6,38,574.72,38.08,575.82,38.08Z" transform="translate(-0.95 5.75)" style="fill: #758ee2"/>
      <path d="M618.36-5.69c26.94,0,52.87,0,78.8-.06,2.58,0,3.52,1,4.19,3.27,5.35,18.42-9.74,34.88-29.05,31.59-14.37-2.44-26-10.26-37.15-19A125.55,125.55,0,0,1,618.36-5.69Z" transform="translate(-0.95 5.75)" style="fill: #fe3a25"/>
      <path d="M576.6,166.37c-9.69-14.55-21.23-27.62-33.7-39.77a81,81,0,0,0-30.38-18.95c-4-1.35-8.54-3.09-12.08.51-3.27,3.32-1.25,7.44-.26,11.23.08.3.25.58.32.89,1.21,4.74-.39,6.37-5.13,4.9a53.63,53.63,0,0,1-13.45-6.94,460.36,460.36,0,0,1-67.6-55.12,53.43,53.43,0,0,1-8.24-10.4c-4.39-7.25-3.32-11.48,4-15.61a37.66,37.66,0,0,1,6.43-3c3.85-1.31,6.09-3.78,6.55-7.83-2.71-3.56-6.63-5.17-10.64-6.65-9.88-3.65-19.22-8.08-24.78-17.76-1.33-2.31-2.82-4.58-2.75-7.42H280.77c5.05,5.3,9.78,10.18,14.4,15.16,4.36,4.69,8.4,9.71,8.84,16.39.52,7.74,3.56,14.35,8.05,20.44,8.77,11.92,19.2,22.3,30,32.36,12.38,11.57,25.71,22.08,37.63,34.16a31.74,31.74,0,0,1,6.28,8.28c1.86,3.79.58,6.39-3.06,8.08-2.84,1.32-5.89,1.11-8.88,1.08-14.15-.18-27.9-3.53-41.83-5.43-6.59-.89-13.18-1.79-19.86-1.41-8.54.49-10.77,4.56-6.35,11.76,1.41,2.29,3,4.46,4.62,6.61,7.65,10.26,17.7,18,27.29,26.29,6.6-.1,13.2,0,19.58,1.89,4.69,1.41,8.25,3.33,10.81,5.91H581.73A44.12,44.12,0,0,0,576.6,166.37Z" transform="translate(-0.95 5.75)" style="fill: #758ee2"/>
      <path d="M895.1,155.77c-4.75-4.23-9.12-8.83-12.22-14.39-2.7-4.84-1.2-7.9,4.17-8.9a50.18,50.18,0,0,1,6.62-.35c9.64-.45,17.79-8.48,17.81-17.56,0-5.54-1.87-8.91-7.86-13.23-9.22-6.67-18.66-13.06-27.8-19.85-24.6-18.28-51.37-33.58-74.17-54.36-6.29-5.75-13.64-10.31-22.19-12.34-10.94-2.6-18.56,5.28-15.64,16.07,1.78,6.56,5.35,12.14,9.28,17.5,11.75,16,26.42,29.4,40.38,43.4,9.9,9.94,8.64,15.22-4.91,19.35-6.94,2.11-14,3.72-21,5.79-3.14.94-6.8,2-7.17,6-.35,3.81,2.3,6.4,5.12,8.56a26.13,26.13,0,0,0,4.45,2.7c5.57,2.74,11.55,4.21,17.57,5.57,15.15,3.43,30,7.21,42.42,17.62,7.24,6.09,14.33,12.34,21.37,18.65H920C911.49,169.55,903.11,162.9,895.1,155.77Z" transform="translate(-0.95 5.75)" style="fill: #75d8d0"/>
    </svg>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    bkcolor: {
      type: String,
      default: '#3b60ed'
    },
    title: {
      type: String,
      default: 'Shoppity'
    },
    img: {
      type: String,
      default: 'banner-ppl'
    }
  }
};
</script>

<style scoped>
h1 {
  color: white;
  position: relative;
  z-index: 100;
  font-size: 60px;
  padding: 8px 80px;
}

.bk {
  position: absolute;
  top: 0;
  left: 0;
}

.ppl-banner {
  position: absolute;
  z-index: 10;
  right: 100px;
}

.masthead {
  width: 100%;
  height: 100px;
  color: white;
  position: relative;
  overflow: hidden;
  margin: 10px 0;
}
</style>